/**
 * 知识点：
 * 1. 克隆一个dom节点 dom.cloneNode(true | false) // true和false 用来判断是否使用深度拷贝
 * 2. 文字滚动效果 定时器+定时器
 * 3. 思路：
 *      1. 立即执行函数处理全局污染
 *      2. 初始化 将第一个元素添加到尾部元素完成循环
 *      3. 将30-60切割成几个块定时更新这些块，从而完成30-60的变化（看起来会是动画效果）
 *      4. 用户交互事件（无）
 */
/**
 * 新闻提示 文字滚动效果
 */
(function () {
  // 初始化：
  var list = document.querySelector(".list");
  const duration = 2000,
    delay = 300,
    EachHeight = 30;
  var currIndex = 0;
  /**
   * 将第一条li内容拼接到尾部
   */
  function cloneFirstItem() {
    var firstItem = list.children[0];
    list.appendChild(firstItem.cloneNode(true));
  }
  cloneFirstItem();
  /**
   * 滚动
   */
  setInterval(moveNext, duration);
  /**
   * 向下滚动
   */
  function moveNext() {
    var from = currIndex * EachHeight;
    currIndex++;
    const duration = 10;
    var to = currIndex * EachHeight;
    var times = delay / duration,
      dis = (to - from) / times;
    var timerId = setInterval(() => {
      from += dis;
      if (from >= to) {
        clearInterval(timerId);
        if (currIndex === list.children.length - 1) {
          currIndex = 0;
          from = 0;
        }
      }
      list.scrollTop = from;
    }, duration);
  }
  // 交互事件
})();
